<template>
	<view class="content">
		<view class="card_top">


			<view class="name">
				{{data.title}}
			</view>


			<view class="time">
				<view class="">
					<text style="margin-right: 15upx;">上课时间：{{data.time_a}} -{{data.time_b}}</text><span
						style="margin-left: 10upx;">{{data.time_s}}-{{data.time_s_en}}</span>
				</view>
				<text style="margin: 0 5upx;" v-for="(item ,index) in data.time_en">{{item}}</text>
			</view>

			<view class="type">
				<view class="typeItem">
					<image src="/static/age.png" mode=""></image> <text>学龄阶段</text>
					<text>{{data.school_title}}</text>
				</view>
				<view class="typeItem">
					<image src="/static/stage.png" mode=""></image> <text>适用阶段</text>
					<text>{{data.applicable}}</text>
				</view>
				<view class="typeItem">
					<image src="/static/hour.png" mode=""></image> <text>总课时数</text>
					<text>{{data.period_num}}</text>
				</view>
				<view class="typeItem">
					<image src="/static/class.png" mode=""></image> <text>班级类型</text>
					<text>{{data.pattern}}</text>
				</view>
			</view>
		</view>

		<view class="money">
			<view class="moneyItem">
				<text>应付款</text>
				<text>￥{{money}}</text>
			</view>
			<view class="moneyItem" v-if="type!=1&&!roundId">
				<text>砍价</text>
				<text>￥{{data.price_a}}</text>
			</view>
			<view class="moneyItem" style="border-bottom: 1upx solid rgb(247,247,247);">
				<text>积分最多可抵扣</text>
				<text>（{{integral}}积分）￥{{integralMoney}}</text>
			</view>
			//骂人是不文明的，请做文明的码农
			<view class="closeMoney">合计：<text>￥{{money==0?0:(type!=1&&!roundId?(money-data.price_a-integralMoney).toFixed(2):(money-integralMoney<0?0:money-integralMoney).toFixed(2))<0?0:(type!=1&&!roundId?(money-data.price_a-integralMoney).toFixed(2):(money-integralMoney<0?0:money-integralMoney)==0?0:(money-integralMoney<0?0:money-integralMoney).toFixed(2))}}</text>
			</view>
		</view>

		<view class="form">
			<view class="phone">
				<view class="">
					联系电话
				</view>
				<input type="text" value="" placeholder="请输入联系方式" v-model="tel" />
			</view>

			<view class="">
				<view class="">
					选择宝贝
				</view>
				<view class="baby">
					<view :class="index==Xindex?'babyItem activeBaby':'babyItem'" v-for="(item ,index) in babyList"
						@click="activeBaby(index)">
						<image :src="item.pic" mode=""></image>
						<view class="name">
							{{item.user}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-toast ref="uToast" />

		<view class="btn" @click="submit">
			提交订单
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},
				babyList: [],
				Xindex: 0,
				type: 1,
				roundId: '',
				tel: '',
				integralMoney: '',
				integral: '',
				code1: '',
				code2: '',
				code: false,
				order_id: '',
				often: false
			}
		},
		computed: {
			money: function() {
				let money = 0
				if (this.type == 1) {
					money = this.data.price
				} else if (this.type == 2) {
					money = this.data.price_a
				} else {
					money = this.data.price_b
				}
				return money
			}
		},
		onShow() {
			this.newData()
		},
		onLoad(e) {
			console.log('测试', e)
			// console.log(e.data)
			// this.data = JSON.parse(e.data)
			this.code = e.code || ''
			this.order_id = e.order_id || ''
			this.roundId = e.round_id
			this.type = e.type
			this.$myRuquest('home/index/courses_details', {
				cour_id: e.courId
			}).then(res => {
				if (res.code == 400) {
					// this.tel = res.data.merchants.service_tel
					this.collect_zt = res.data.collect_zt
					this.data = res.data.courses
					this.merchants = res.data.merchants
					this.scoring = res.data.scoring
					this.data.time_a = this.$util._date_time(+this.data.time_a * 1000)
					this.data.time_b = this.$util._date_time(+this.data.time_b * 1000)
					this.data.time_en = this.data.time_en.split(',')
					this.code1 = this.data.type.indexOf('2')
					this.code2 = this.data.type.indexOf('3')
					//死亡嵌套
					this.$myRuquest('home/user/user').then(res => {
						if (res.code == 400) {
							let basic = uni.getStorageSync('basic');
							this.integral = res.data.integral
							this.integralMoney = res.data.integral * basic.integral_switch * 0.01
							if (this.integralMoney > this.data.price_en) this.integralMoney = this.data
								.price_en
							this.integral = this.integralMoney / (basic.integral_switch * 0.01)
						}
					})
				}
			})


		},
		methods: {
			newData() {
				let that = this
				this.$myRuquest('home/user/baby_list').then(res => {
					if (res.code == 400) {
						this.babyList = res.data
						if (res.data.length == 0) {
							uni.showModal({
								title: '提示',
								content: '您还未添加宝贝,是否先去添加宝贝',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/me/babyList/babyList'
										});
									} else if (res.cancel) {
										uni.navigateBack({
											delta: 1
										});
									}
								}
							});
						}

						//获取上次付款所填写信息
						if (that.order_id) {
							that.$myRuquest('home/user/order_details', {
								order_id: that.order_id
							}).then(res => {
								if (res.code == 400) {
									that.tel = res.data.order.tel
									that.babyList.forEach((item, index) => {
										if (item.id == res.data.order.baby_id) that.Xindex = index
									})
								}
							})
						}
					}
				})
			},
			activeBaby(index) {
				this.Xindex = index
			},
			submit() {
				if (this.often) return;
				let reg = /^\d{11}$/;
				if (!reg.test(this.tel)) return this.$refs.uToast.show({
					title: '手机号格式有误！',
					type: 'warning'
				});
				if (this.Xindex == -1) return this.$refs.uToast.show({
					title: '请选择一个宝贝',
					type: 'warning'
				});
				this.often = true
				if (this.code) {
					let data = {
						type: this.type,
						baby_id: this.babyList[this.Xindex].id,
						tel: this.tel,
						order_id: this.order_id
					}
					if (this.roundId) {
						data.round_id = this.roundId
					}

					this.$myRuquest('home/user/order_save', data, 'POST').then(res => {

						if (res.code == 400) {
							let data = res.data
							if (data) {
								this.payMoney(data, true)
							} else {
								this.$refs.uToast.show({
									title: res.msg,

								})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 1500)
							}


						} else {
							this.often = false
							this.$refs.uToast.show({
								title: res.msg
							})
						}
					})
				} else {
					let data = {
						type: this.type,
						cour_id: this.data.id,
						baby_id: this.babyList[this.Xindex].id,
						tel: this.tel,
						round_id: this.roundId
					}
					this.$myRuquest('home/user/courses_order', data, 'POST').then(res => {
						if (res.code == 400) {
							let data = res.data
							if (data) {
								this.payMoney(data)
							} else {
								this.$refs.uToast.show({
									title: res.msg,

								})
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/me/order/order'
									})
								}, 1500)
							}

						} else {
							this.often = false
							this.$refs.uToast.show({
								title: res.msg,

							})
						}
					})
				}
			},
			payMoney(data, code) {
				let that = this
				uni.requestPayment({
					provider: 'wxpay',
					nonceStr: data.nonceStr,
					package: data.package,
					paySign: data.paySign,
					signType: data.signType,
					timeStamp: data.timeStamp,
					success: function(res) {
						that.$refs.uToast.show({
							type: 'success',
							title: '支付成功'
						})
						setTimeout(() => {
							if (code) {
								uni.navigateBack({
									delta: 1
								});
							} else {
								uni.redirectTo({
									url: '/pages/me/order/order'
								})
							}
						}, 1500)
					},
					fail: function(err) {
						setTimeout(() => {
							if (code) {
								uni.navigateBack({
									delta: 1
								});
							} else {
								uni.redirectTo({
									url: '/pages/me/order/order'
								})
							}
						}, 1500)
						that.$refs.uToast.show({
							type: 'error ',
							title: '支付失败'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		background-color: rgb(247, 247, 247);
		padding: 20upx;
		min-height: 100vh;
	}

	.card_top {
		background-color: #fff;
		padding: 20upx;
		border-radius: 12upx;
		// border-bottom: 1upx solid rgb(247,247,247);

		.icon {
			flex: 2;
			display: flex;
			text-align: right;

			view {
				flex: 1;
			}
		}

		.name {
			font-size: 38upx;
			font-weight: 900;
			margin-left: 20upx;
		}


		.time {
			font-size: 20upx;
			color: #5b5b5b;
			margin-left: 20upx;
		}

		.type {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			padding-left: 10upx;

			.typeItem {
				width: 48%;
				margin: 10upx 1%;
				display: flex;
				font-size: 26upx;

				image {
					width: 20upx;
					height: 20upx;
					margin: auto 0;
					background-image: none;
				}

				text:nth-child(2) {
					margin: 0 15upx;
					color: #757575;
				}
			}
		}

	}

	.money {
		background-color: #fff;
		border-radius: 12upx;
		padding: 20upx;
		margin: 20upx 0;

		.moneyItem {
			display: flex;
			font-size: 26upx;
			padding: 20upx 0;

			text {
				flex: 1;
			}

			text:nth-child(2) {
				text-align: right;
			}
		}

		.closeMoney {
			text-align: right;

			text {
				color: red;
			}
		}
	}

	.form {
		background-color: #fff;
		border-radius: 12upx;
		padding: 20upx;

		.phone {
			display: flex;
			margin-bottom: 20upx;

			input {
				margin-left: 20upx;
			}
		}

		.baby {
			display: flex;
			flex-wrap: wrap;
			width: 100%;



			.babyItem {
				width: calc(29% -20upx);
				margin: 20upx 14upx;
				padding: 10upx;
				position: relative;
				transition: all .3s;

				image {
					width: 160upx;
					height: 160upx;
					margin: 0 10upx;
					border-radius: 8upx;
				}

				.name {
					text-align: center;
				}

				.esc {
					position: absolute;
					top: -20upx;
					right: -20upx;
				}
			}
		}

	}

	.activeBaby {
		background-color: rgba(0, 0, 0, .08);
		box-shadow: 0 0 5upx rgba(0, 0, 0, .2);
		border-radius: 12upx;
	}

	.btn {
		width: 500upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		margin: 100upx auto;
		border-radius: 12upx;
		color: #fff;
		background: linear-gradient(to right, rgb(254, 189, 140), rgb(254, 28, 77));
	}
</style>
